//
// Forms
// --------------------------------------------------

//== Forms variable
// -------------------------
//** `<input>` background color
$input-bg: #ffffff !default;

//** `<input disabled>` background color
$input-bg-disabled: $color-gray-lighter !default;

//** Text color for `<input>`s
$input-color: #555555 !default;

//** `<input>` border color
$input-border-color: #cccccc !default;

//** border color for inputs on focus
$input-border-color-focus: #66afe9 !default;

//** Default `.form-control` border radius
// This has no effect on `<select>`s in some browsers, due to the limited stylability of `<select>`s in CSS.
$input-border-radius: $border-radius-base !default;

//** Large `.form-control` border radius
$input-border-radius-large: $border-radius-large !default;

//** Small `.form-control` border radius
$input-border-radius-small: $border-radius-small !default;

//** Placeholder text color
$input-color-placeholder: #999999 !default;

//** Default `.form-control` height
$input-height-base: ($line-height-computed + ($padding-base-vertical * 2) + 2) !default;

//** Large `.form-control` height
$input-height-large: (ceil($font-size-large * $line-height-large) + ($padding-large-vertical * 2) + 2) !default;

//** Small `.form-control` height
$input-height-small: (floor($font-size-small * $line-height-small) + ($padding-small-vertical * 2) + 2) !default;

//** Disabled cursor for form controls and buttons.
$cursor-disabled: not-allowed !default;

//== Forms styles
// -------------------------
fieldset {
    margin: 0;
    padding: 0;
    min-width: 0;
    border: 0 none;
}

legend {
    display: block;
    margin-bottom: $line-height-computed;
    padding: 0;
    width: 100%;
    line-height: inherit;
    border: 0;
    border-bottom: 1px solid #e5e5e5;
    color: $color-gray-dark;
    font-size: ($font-size-base * 1.5);
}

label {
    display: inline-block;
    margin-bottom: 5px;
    max-width: 100%;
    font-weight: bold;
}

input[type="search"] {
    @include fn-box-sizing(border-box);
    -webkit-appearance: none;
}

// Position radios and checkboxes better
input[type="radio"],
input[type="checkbox"] {
    margin: 4px 0 0;
    margin-top: 1px \9; // IE8-9
    *margin-top: 0;
    line-height: normal;
}

input[type="file"] {
    display: block;
}

// Make range inputs behave like textual form controls
input[type="range"] {
    display: block;
    width: 100%;
}

// Make multiple select elements height not fixed
select[multiple],
select[size] {
    height: auto;
}

// Focus for file, radio and checkbox
input[type="file"]:focus, 
input[type="radio"]:focus, 
input[type="checkbox"]:focus {
    @include fn-tab-focus;
}

// Adjust output element
output {
    display: block;
    padding-top: ($padding-base-vertical + 1);
    line-height: $line-height-base;
    color: $input-color;
    font-size: $font-size-base;
}

// Common form controls
// -------------------------
.form-control {
    display: block;
    padding: $padding-base-vertical $padding-base-horizontal;
    width: 100%;
    height: $input-height-base;
    line-height: $line-height-base;
    background-color: $input-bg;
    background-image: none;
    border: 1px solid $input-border-color;
    color: $input-color;
    font-size: $font-size-base;
	@include fn-border-radius($input-border-radius);
    @include fn-box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
    @include fn-transition(border-color ease-in-out .15s, box-shadow ease-in-out .15s);
    
    // Customize the `:focus` state to imitate native WebKit styles.
    @include form-control-focus;
    
    // Placeholder
    @include fn-placeholder;
    
    // Unstyle the caret on `<select>`s in IE10+.
    &::-ms-expand {
        border: 0;
        background-color: transparent;
    }
    
    // Disabled and read-only inputs
    //
    // HTML5 says that controls under a fieldset > legend:first-child won't be
    // disabled if the fieldset is disabled. Due to implementation difficulty, we
    // don't honor that edge case; we style them as disabled anyway.
    &[disabled], 
    &[readonly], 
    fieldset[disabled] & {
        background-color: $input-bg-disabled;
        opacity: 1;
    }
  
    &[disabled], 
    fieldset[disabled] & {
        cursor: $cursor-disabled;
    }
}

// Reset height for `textarea`s
textarea.form-control {
    height: auto;
}

// Form groups
//
// Designed to help with the organization and spacing of vertical forms. For
// horizontal forms, use the predefined grid classes.
// -------------------------
.form-group {
    margin-bottom: 15px;
}

// Checkboxes and radios
//
// Indent the labels to position radios/checkboxes as hanging controls.
// -------------------------
.radio, 
.checkbox {
    display: block;
    position: relative;
    margin-top: 10px;
    margin-bottom: 10px;

    label {
        margin-bottom: 0;
        padding-left: 20px;
        min-height: $line-height-computed;
        font-style: normal;
        font-weight: normal;
        cursor: pointer;
    }
}
.radio input[type="radio"], 
.radio-inline input[type="radio"], 
.checkbox input[type="checkbox"], 
.checkbox-inline input[type="checkbox"] {
    position: absolute;
    margin-top: 4px \9;
    margin-left: -20px;
}
.radio + .radio, 
.checkbox + .checkbox {
    margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing
}

// Radios and checkboxes on same line
.radio-inline, 
.checkbox-inline {
    display: inline-block;
    position: relative;
    margin-bottom: 0;
    padding-left: 20px;
    font-style: normal;
    font-weight: normal;
    vertical-align: middle;
    cursor: pointer;
}
.radio-inline + .radio-inline, 
.checkbox-inline + .checkbox-inline {
    margin-top: 0;
    margin-left: 10px; // space out consecutive inline controls
}

// Apply same disabled cursor tweak as for inputs
// Some special care is needed because <label>s don't inherit their parent's `cursor`.
//
// Note: Neither radios nor checkboxes can be readonly.
input[type="radio"], 
input[type="checkbox"] {
    &[disabled],
    &.disabled,
    fieldset[disabled] & {
        cursor: $cursor-disabled;
    }
}
// These classes are used on elements with <label> descendants
.radio,  
.checkbox {
    &.disabled,
    fieldset[disabled] & {
        label {
            cursor: $cursor-disabled;
        }
    }
}
// These classes are used directly on <label>s
.radio-inline, 
.checkbox-inline {
    &.disabled,
    fieldset[disabled] & {
        cursor: $cursor-disabled;
    }
}

// Static form control text
//
// Apply class to a `p` element to make any string of text align with labels in
// a horizontal form layout.
// -------------------------
.form-control-static {
    // Remove default margin from `p`
    margin-bottom: 0;
    // Size it appropriately next to real form controls
    padding-top: ($padding-base-vertical + 1);
    padding-bottom: ($padding-base-vertical + 1);
    min-height: ($line-height-computed + $font-size-base);
  
    &.input-lg, 
    &.input-sm {
        padding-right: 0;
        padding-left: 0;
    }
}

// Help text
//
// Apply to any element you wish to create light text for placement immediately
// below a form control. Use for general help, formatting, or instructional text.
// -------------------------
.help-block {
    display: block;
    margin-top: 5px;
    margin-bottom: 10px;
    color: #808080;
}
